<template>
    <div>
        <!-- 加载PDF文件 -->
        <pdf v-if="numPages" v-for="i in numPages" :key="i" :src="loadingTask" :page="i"
            style="width: 100%; margin-bottom: 15px;"></pdf>
        <div>进入了</div>
    </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
    components: {
        pdf
    },
    data() {
        return {
            url: 'http://localhost:92/dev-api/profile/upload/2024/12/17/%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98-%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%8D%9A%E5%AE%A2%E7%B3%BB%E7%BB%9F_20241217174153A001.pdf',

            loadingTask: null,
        }
    },
    computed: {
        numPages() {
            if (this.loadingTask && this.loadingTask.pdfInfo) {
                return this.loadingTask.pdfInfo.numPages;
            }
            return undefined;
        }
    },
    methods: {
        loadPdf() {
            this.loadingTask = pdf.createLoadingTask(this.url);
            this.loadingTask.promise.then(() => {
                console.log('PDF loaded');
            }).catch(err => {
                console.error('加载PDF失败:', err);
            });
        }
    },
    mounted() {
        this.loadPdf();
    }
}
</script>